<template>
  <div class="aside">
    <div class="info-box">
      <div class="info-title">
        下午好 <span style="color: #ff86a4">user001</span>
      </div>
      <div class="content">
        <div class="left">
          <div class="info-user">
            <div class="avatar">
              <el-avatar shape="square" :size="50" :src="squareUrl" />
            </div>
            <div class="stats">
              <div>发布文章数: <span>1</span></div>
              <div>点赞总数: <span>1</span></div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="attendance">
            <h4>连续签到 <span style="color: #1e80ff">1天</span></h4>
            <div class="attendance-btn">
              <el-button type="primary">签到</el-button>
            </div>
          </div>
          <div class="publish-btn">
            <el-button type="primary">参与交流</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="like-leaderboard">
      <div class="leaderboard-title">
        <el-icon>
          <Medal />
        </el-icon>
        <span>点赞榜</span>
      </div>
      <div class="leaderboard-content">
        <ul>
          <li v-for="item, index of likeList" :key="item.id">
            <div class="left">
              <span>{{ index + 1 }}.</span>
            </div>
            <div class="right">
              <div class="article-title">{{ item.articleTitle }}</div>
              <div class="article-content">
                <div class="article-like">
                  <el-icon>
                    <svg-icon name="dianZan" />
                  </el-icon>
                  <span>{{ item.likeNum }}</span>
                </div>
                <div class="article-user">
                  <span>{{ item.userName }}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue"
import {
  Medal,
} from "@element-plus/icons-vue"

// userinfo头像
const state = reactive({
  squareUrl:
    '/images/avatar/default_svg.svg',
})
const { squareUrl } = toRefs(state)

// 点赞榜 列表
const likeList = reactive([
  {
    id: '1',
    articleTitle: '我又写了一堆烂代码',
    likeNum: 90,
    userName: '陈有余Tech',
    userId: '10001',
    avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
  },
  {
    id: '2',
    articleTitle: '五年后端外包仔的回顾',
    likeNum: 80,
    userName: '玛奇玛丶',
    userId: '10001',
    avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
  },
  {
    id: '3',
    articleTitle: '在前端领域摸爬滚打7年，我终于掌握了这些沉淀技巧',
    likeNum: 70,
    userName: '小鑫同学',
    userId: '10001',
    avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
  },
  {
    id: '4',
    articleTitle: '4年前端的迷茫与挣扎 ',
    likeNum: 60,
    userName: 'SyMind',
    userId: '10001',
    avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
  },
  {
    id: '5',
    articleTitle: '迄今为止我写过最复杂的算法 ',
    likeNum: 50,
    userName: 'passer-by6061',
    userId: '10001',
    avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
  }
])

</script>

<style lang="less" scoped>
@color: #909090; // 默认字体颜色
@border-color: #dcdfe6; //边框默认颜色

.aside {

  .info-box {
    height: 200px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .05);
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;

    .info-title {
      padding-bottom: 10px;
      border-bottom: 1px solid @border-color;
      font-size: 20px;
      font-weight: 700;
    }

    .content {
      display: flex;
      justify-content: space-between;

      .left {
        height: 150px;
        border-right: 1px solid @border-color;

        flex: 1;

        .avatar {
          padding-top: 20px;
          display: flex;
          justify-content: center;
        }

        .stats {
          width: 150px;
          padding-top: 10px;

          &>div {
            width: 90%;
            padding-top: 10px;
            text-align: right;
            font-size: 14px;

            span {
              padding-left: 20px;
            }
          }
        }
      }

      .right {
        flex: 1;

        .attendance {
          padding: 10px 0;
          border-bottom: 2px solid #ededed;

          h4 {
            text-align: center;
            font-size: 18px;
          }

          .attendance-btn {
            padding-top: 20px;
            display: flex;
            justify-content: center;
          }
        }

        .publish-btn {
          padding-top: 20px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }

  .like-leaderboard {
    margin-top: 20px;
    height: 400px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .05);
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
  }

  .leaderboard-title {
    height: 20px;
    line-height: 20px;
    font-size: 18px;

    display: flex;
    align-items: center;
  }

  .leaderboard-content {
    height: 70px;
    padding-top: 20px;

    li {
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 8fr;

      .left {
        margin-right: 20px;
        height: 70px;
        line-height: 70px;

        span {
          font-size: 22px;
        }
      }

      .right {
        padding-top: 10px;

        .article-title {
          font-size: 18px;
          font-weight: 700;
        }

        .article-content {
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: flex-start;

          .article-like {
            padding-right: 20px;
          }
        }
      }
    }
  }
}
</style>